<template>
    <div>
        <div class="flex flex_end_cus1">
          <div class="flex flex_end_cus1_box">
             <div class="case-state flex" style="margin-right:10px;">
               <p>案件类型：</p>
                <el-select v-model="Casevalue" placeholder="请选择" @change="getcasetypeCustomer()"> 
                  <el-option v-for="item in optionMenu" :key="item.Id" :label="item.Category_Name"  :value="item.Id"> </el-option>
                </el-select>

                <!-- <el-select v-model="Casevalue1" placeholder="请选择" style="margin-left: 10px;" @change="chaxun(Casevalue1)">
                <el-option v-for="(item,index) in optionChildMenu" :key="index" :label="item.Value"  :value="item.Id"> </el-option>
                </el-select>    -->
              </div>   
              <div class="case-state flex" style="margin-right:10px;">
               <p>分所：</p>
                <el-select v-model="fensuo" placeholder="请选择" @change="getSelectfensuo1(fensuo)"> 
                  <el-option v-for="item in fensuomeun" :key="item.Id" :label="item.Org_Name"  :value="item.Id"> </el-option>
                </el-select>

                <el-select v-model="bumeng" placeholder="请选择" style="margin-left: 10px;" @change="chaxun1(bumeng)">
                  <el-option v-for="(item,index) in bumengmeun" :key="index" :label="item.Org_Name"  :value="item.Id"> </el-option>
                </el-select>   
              </div>   
          </div>
            
        </div>
          
        <div class="selectMenu flex">
            <el-table :data="tableData1" border style="width: 100%">
              <el-table-column prop="Id" label="案件编号" width="" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="Case_Name" label="案件名称" width="" :show-overflow-tooltip="true"></el-table-column>
              
              
          </el-table> 
        </div>

            <div class="block flex">
            <el-pagination background @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="currentPage1"
            :page-sizes="[20,50,100]" :page-size="pageNum1"  layout="total, sizes, prev, pager, next, jumper" :total="PageCount1">
              </el-pagination>
          </div>



    </div>
</template>
<script>
import store from '../../vuex/store'
var _this = this
  export default {
    data() {
      return {
       Casevalue:0,
       Casevalue1:'',
        //1下拉菜单
        optionMenu:{},
        //2下拉菜单
        optionChildMenu:{},
        tableData1:[],
        currentPage:1,
        PageCount1:0,
        pageNum1:1,
        numPage:20,

        fensuo:0,
        bumeng:0,
        fensuomeun:[],
        bumengmeun:[],

        currentPage1:1,
      };
    },
    methods: {
      handleSizeChange1:function(val) {
         this.numPage = val

         this.getCaseList()
      },
      handleCurrentChange1:function(val) {
        this.currentPage = val
        this.getCaseList()
      },
      chaxun(id){

      },
      chaxun1(id){
        this.getcasetypeCustomer()
      },
      getcasetypeCustomer(){
        this.$http.get('/yongxu/Statistics/getCustomer',{params:{
           caseType:this.Casevalue,
           orgId:this.fensuo,
           departMent:this.bumeng,
           Display_Page_Number:this.numPage,
           PageNumber:this.pageNum1,
         }}).then((res)=>{
           this.tableData1 = res.data.data
           this.$forceUpdate();
        })
      },
      //获取一级下拉
        getSelectMenu:function(){
         this.$http.get('/yongxu/Index/GetBoxOne').then((res)=>{
           console.log(res)
           this.optionMenu = res.data
           this.optionMenu.push({Id:0,Category_Name:'全部'})
        })
      },
      //下拉二级下拉查询
      getSelectChildeMenu:function(id){
        
                    // this.optionChildMenu = ''
                    // this.Casevalue1 =''
                    // this.selectOneId = id
                    // this.$http.get('/yongxu/Index/GetBoxTwo',{params:{Id:this.selectOneId}}).then((res)=>{
                    //   //console.log(res)
                    // this.optionChildMenu = res.data  
                    // this.optionChildMenu.push({Id:0,Value:'全部',Category_Id:0})
                    // this.Category_Id = this.Casevalue
                    // if(res.data.length===0){
                    //     this.Casevalue1 = ''
                    // }else{
                    //     this.Casevalue1 = 0
                    // }
                    // this.changeTowValue(this.Casevalue1)
        //  })
      },
      //获取二级菜单下拉
        changeTowValue:function(id){
         // console.log(id)
            if(id == '' || id ==null){
                this.Casevalue2 = 0
            }else{
              this.Casevalue2 = id
            }
              this.getCaseList()
      },
      getquanbu(){
        // this.$http.get('/yongxu/Index/GetBoxOne',{params:{Id:this.selectOneId}}).then((res)=>{
        //       //console.log(res)
        //     this.optionChildMenu = res.data  
        //     this.optionChildMenu.push({Id:0,Value:'全部',Category_Id:0})
        //     this.Category_Id = this.Casevalue
        //     if(res.data.length===0){
        //         this.Casevalue1 = ''
        //     }else{
        //         this.Casevalue1 = 0
        //     }
        //     this.changeTowValue(this.Casevalue1)
        //  })
      },
      getSelectfensuo(){
        this.$http.get('/yongxu/Index/Get_Branch').then((res)=>{
           this.fensuomeun = res.data
           this.fensuomeun.push({Id:0,Org_Name:'全部'})
        })
      },
      getSelectfensuo1(id){
        this.$http.get('/yongxu/Statistics/getBranch',{params:{
           parentId:id,
         }}).then((res)=>{
           this.bumeng = ''
           this.bumengmeun = res.data
           this.bumengmeun.push({Id:0,Org_Name:'全部'})
        })
      }
    },
    mounted(){
      this.bumengmeun.push({Id:0,Org_Name:'全部'})
      this.getSelectMenu()
      this.getquanbu()
      this.getSelectfensuo()
      this.getcasetypeCustomer()
      
    },
    components:{
      
    },
    
       
  };
</script>
<style>
@import '../../assets/sass/main.css';
.input{
    flex-direction: row;
    justify-content: flex-start;
    width: 250px;
    margin-right: 20px;
    border-radius: 45px;
    border: 1px solid #DDDDDD; 
}
.case-input{
      width:  200px;
    height: 36px;
    /* border: 1px solid #DDDDDD; */
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
   
    padding-left: 21px;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    color: #4a4a4a;
    background-color: transparent;
}
.case-button{
    outline: none;
    width: 48px;
    height: 28px;
    border: none;
    border-radius: 36px 36px 36px 36px;
    background-color: #fefeff;
    margin-right: 4px;
    margin-top: 4px;
    cursor: pointer;
}
 .input:hover{
    border: 1px solid #7E2C2E;
}
.case-button:hover{
    background: #7E2C2E;
    color: #ffffff;
}
.case-child-end2{
    flex-direction: row;
    justify-content:space-between;
}
.selectMenu{
    margin-top: 20px;
}
.export{
  width: 25px;
  height: 25px;
  background: #7E2C2E;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.flex_end_cus1{
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
}
.flex_end_cus1_box{
  align-items: center;
}
</style>